/////////////////////////////////////////////////
// BASE COLOURS /////////////////////////////////
/////////////////////////////////////////////////

// Add all this to the related tokens section so that we can switch between LIGHT and DARK easily. Also the V8 could also be styled that way


$EDIT_ENGINE--BASE--COLOUR: _color("primary");
$MODAL--BG--COLOUR: rgba(_color("primary"), .98);


/////////////////////////////////////////////////
// DEFAULTS /////////////////////////////////////
/////////////////////////////////////////////////
$DEFAULT--FONT--FAMILY: _font("nunito");
$DEFAULT--FONT--SIZE: 14px;
$DEFAULT--FONT--WEIGHT: _weight("normal");
$DEFAULT--FONT--COLOUR: _color("secondary");

$DEFAULT--TITLE_FONT--FAMILY: _font("raleway");

$DEFAULT--TRANSITION: _transition("all", "quicker");


/////////////////////////////////////////////////
// ICONS ///////////////////////////////////
/////////////////////////////////////////////////

// TAB ICONS ::: CLOSED
$SIDE_PANEL--ICON--SPLIITER:  _icon("splitter", "grey");

$SIDE_PANEL--ICON--PAGES---CLOSED: _icon("pages", "white");
$SIDE_PANEL--ICON--CREATE---CLOSED: _icon("create", "white");
$SIDE_PANEL--ICON--CONTENT---CLOSED: _icon("content", "white");
$SIDE_PANEL--ICON--FILES---CLOSED: _icon("files", "white");
$SIDE_PANEL--ICON--SEARCH---CLOSED: _icon("search", "white");
$SIDE_PANEL--ICON--TAXONOMY---CLOSED: _icon("taxonomy", "white");
$SIDE_PANEL--ICON--DEVICES---CLOSED: _icon("devices", "white");
$SIDE_PANEL--ICON--SETTINGS---CLOSED: _icon("settings", "white");

// TAB ICONS ::: OPEN
$SIDE_PANEL--ICON--PAGES---OPEN: _icon("pages", "grey");
$SIDE_PANEL--ICON--CREATE---OPEN: _icon("create", "grey");
$SIDE_PANEL--ICON--CONTENT---OPEN: _icon("content", "grey");
$SIDE_PANEL--ICON--FILES---OPEN: _icon("files", "grey");
$SIDE_PANEL--ICON--SEARCH---OPEN: _icon("search", "grey");
$SIDE_PANEL--ICON--TAXONOMY---OPEN: _icon("taxonomy", "grey");
$SIDE_PANEL--ICON--DEVICES---OPEN: _icon("devices", "grey");
$SIDE_PANEL--ICON--SETTINGS---OPEN: _icon("settings", "grey");

// TAB ICONS ::: SELECTED
$SIDE_PANEL--ICON--PAGES---SELECTED: _icon("pages", "blue");
$SIDE_PANEL--ICON--CREATE---SELECTED: _icon("create", "blue");
$SIDE_PANEL--ICON--CONTENT---SELECTED: _icon("content", "blue");
$SIDE_PANEL--ICON--FILES---SELECTED: _icon("files", "blue");
$SIDE_PANEL--ICON--SEARCH---SELECTED: _icon("search", "blue");
$SIDE_PANEL--ICON--TAXONOMY---SELECTED: _icon("taxonomy", "blue");
$SIDE_PANEL--ICON--DEVICES---SELECTED: _icon("devices", "blue");
$SIDE_PANEL--ICON--SETTINGS---SELECTED: _icon("settings", "blue");

// TAB ICONS ::: OFF
$SIDE_PANEL--ICON--PAGES---OFF: _icon("pages", "black");
$SIDE_PANEL--ICON--CREATE---OFF: _icon("create", "black");
$SIDE_PANEL--ICON--CONTENT---OFF: _icon("content", "black");
$SIDE_PANEL--ICON--FILES---OFF: _icon("files", "black");
$SIDE_PANEL--ICON--SEARCH---OFF: _icon("search", "black");
$SIDE_PANEL--ICON--TAXONOMY---OFF: _icon("taxonomy", "black");
$SIDE_PANEL--ICON--DEVICES---OFF: _icon("devices", "black");
$SIDE_PANEL--ICON--SETTINGS---OFF: _icon("settings", "black");

// EDIT MODE
$CACHE-ICON: _icon("cache", "grey");
$PUBLISH-ICON: _icon("publish", "white");
$PREVIEW-ICON: _icon("visibility", "grey");
$EDIT-MODE--PAGE-TITLE---COLOR: _color("primary");
$EDIT-MODE--PAGE-TITLE---SIZE: _size("large");
$EDIT-MODE--PAGE-TITLE---TOP: -15px;
$EDIT-MODE--PAGE-TITLE---LEFT: 26px;

$EDIT-MODE--ACTION-TOOLBAR---BORDER: 1px solid _color("secondary", e);
$EDIT-MODE--ACTION-TOOLBAR---CELL: 0;
$EDIT-MODE--ACTION-TOOLBAR---FONT-SIZE: _size("small");
$EDIT-MODE--ACTION-TOOLBAR---SIMPLE-ARROW: _icon("arrowDown", "grey");
$EDIT-MODE--ACTION-TOOLBAR---ARROW: url(_icon("arrowDown", "grey")) no-repeat center center #{/15px};
$EDIT-MODE--ACTION-TOOLBAR-BG---HOVER: _color("secondary", d);

$EDIT-MODE--EDIT-MENU---TOP: 78px;
$EDIT-MODE--EDIT-MENU---LEFT: 5px;

$EDIT-MODE--EDIT-MENU---RIGHT: auto;
$EDIT-MODE--EDIT-MENU---PADDING: 3px 0 0 50px;
$EDIT-MODE--MORE-OPTIONS-POSITION: "BOTTOM-LEFT";

$EDIT-MODE-MULTIPLE-SELECT-ICON: _icon("multipleSelect", "grey");
$EDIT-MODE-MULTIPLE-SELECT-TOP: 18px;
$EDIT-MODE-MULTIPLE-SELECT-RIGHT: -52px;

$EDIT-MODE--CHANNEL---BG: none;

$SPLITTER--BG: url(_theme($SPLITTER--ICON---UP, $SIDE-PANEL)) no-repeat center _theme($SPLITTER--BG---UP, $SIDE-PANEL);
$SPLITTER--WIDTH: 5px;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// THE FOLLOWING STILL NEED TO BE UPDATED WITH THE _theme() COLOUR ASSIGNMENT
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////
// FORMS ////////////////////////////////////////
/////////////////////////////////////////////////

$FORM--CONTEXT_MENU--BG--COLOUR---UP: _color("tertiary");
$FORM--CONTEXT_MENU--BG--COLOUR---HOVER: lighten($FORM--CONTEXT_MENU--BG--COLOUR---UP, 5%);
$FORM--CONTEXT_MENU--BG--COLOUR---DISABLED: _color("tertiary");
$FORM--CONTEXT_MENU--FONT--COLOUR---UP: _color("secondary");
$FORM--CONTEXT_MENU--FONT--COLOUR---HOVER: _color("secondary");
$FORM--CONTEXT_MENU--FONT--COLOUR---DISABLED: rgba($FORM--CONTEXT_MENU--FONT--COLOUR---UP, .7) !important;

/////////////////////////////////////////////////
// TREES ////////////////////////////////////////
/////////////////////////////////////////////////

// ROW UP
$TREE--ROW--FONT--COLOUR---UP: _color("primary", c);
$TREE--ROW--ICON---UP: _icon("pages", "grey");
$TREE--ROW--BG--COLOUR---UP: transparent;

// ROW HOVER
$TREE--ROW--BG--COLOUR---HOVER: rgba(_color("primary", c), .1);
$TREE--ROW--FONT--COLOUR---HOVER: _color("primary", i);
$TREE--ROW--ICON---HOVER: _icon("pages", "grey");

// ROW SELECTED
$TREE--ROW--BG--COLOUR---SELECTED: _color("tertiary");
$TREE--ROW--FONT--COLOUR---SELECTED: _color("secondary");
$TREE--ROW--ICON---SELECTED: _icon("pages", "white");

// ROW HOVER SELECTED
$TREE--ROW--BG--COLOUR---SELECTED_HOVER: _color("tertiary");
$TREE--ROW--FONT--COLOUR---SELECTED_HOVER: _color("secondary");
$TREE--ROW--ICON---SELECTED_HOVER: _icon("pages", "white");

// MORE OPTIONS BUTTON
$TREE--MORE_OPTIONS--ICON---UP: _icon("moreOptions", "grey");
$TREE--MORE_OPTIONS--ICON---HOVER: _icon("moreOptions", "grey");
$TREE--MORE_OPTIONS--ICON---SELECTED: _icon("moreOptions", "white");
$TREE--MORE_OPTIONS--ICON---SELECTED_HOVER: _icon("moreOptions", "white");

/////////////////////////////////////////////////
// TREES FOR SEARCH RESULT //////////////////////
/////////////////////////////////////////////////

// ROW UP
$TREE--ROW--FONT--COLOUR---UP\:SEARCH_RESULT: darken(_color("secondary"), 3%);
$TREE--ROW--ICON---UP\:SEARCH_RESULT: _icon("pages", "grey");
$TREE--ROW--BG--COLOUR---UP\:SEARCH_RESULT: transparent;

// ROW HOVER
$TREE--ROW--BG--COLOUR---HOVER\:SEARCH_RESULT: rgba(_color("primary", c), .1);
$TREE--ROW--FONT--COLOUR---HOVER\:SEARCH_RESULT: lighten(_color("secondary"), 10%);
$TREE--ROW--ICON---HOVER\:SEARCH_RESULT: _icon("pages", "grey");

// ROW SELECTED
$TREE--ROW--BG--COLOUR---SELECTED\:SEARCH_RESULT: rgba(_color("primary", c), .7);
$TREE--ROW--FONT--COLOUR---SELECTED\:SEARCH_RESULT: _color("secondary");
$TREE--ROW--ICON---SELECTED\:SEARCH_RESULT: _icon("pages", "white");

// ROW HOVER SELECTED
$TREE--ROW--BG--COLOUR---SELECTED_HOVER\:SEARCH_RESULT: _color("primary", c);
$TREE--ROW--FONT--COLOUR---SELECTED_HOVER\:SEARCH_RESULT: _color("secondary");
$TREE--ROW--ICON---SELECTED_HOVER\:SEARCH_RESULT: _icon("pages", "white");

// MORE OPTIONS BUTTON
$TREE--MORE_OPTIONS--ICON---UP\:SEARCH_RESULT: _icon("moreOptions", "grey");
$TREE--MORE_OPTIONS--ICON---HOVER\:SEARCH_RESULT: _icon("moreOptions", "grey");
$TREE--MORE_OPTIONS--ICON---SELECTED\:SEARCH_RESULT: _icon("moreOptions", "white");
$TREE--MORE_OPTIONS--ICON---SELECTED_HOVER\:SEARCH_RESULT: _icon("moreOptions", "white");

/////////////////////////////////////////////////
// RICH TEXT EDITOR /////////////////////////////
/////////////////////////////////////////////////

// ICONS
$RICH_TEXT_EDITOR--ICON_SET: _icon("ckeditor", "white");
$RICH_TEXT_EDITOR--ICON_SET---LEGACY: _icon("ckeditorLegacy", "white");

// TOOL GROUP
$RICH_TEXT_EDITOR--TOOLGROUP--BG--COLOUR--UP: lighten($EDIT_ENGINE--BASE--COLOUR, 6%);
$RICH_TEXT_EDITOR--TOOLGROUP--BG--COLOUR--HOVER: lighten($EDIT_ENGINE--BASE--COLOUR, 8%);

// TOOL
$RICH_TEXT_EDITOR--TOOL--BG--COLOUR--UP: transparent;
$RICH_TEXT_EDITOR--TOOL--BG--COLOUR--HOVER: lighten($EDIT_ENGINE--BASE--COLOUR, 12%);
$RICH_TEXT_EDITOR--TOOL--BG--COLOUR--SELECTED: lighten($EDIT_ENGINE--BASE--COLOUR, 16%);

// COMBO
$RICH_TEXT_EDITOR--COMBO--BG--COLOUR: lighten($EDIT_ENGINE--BASE--COLOUR, 75%);

// LABEL
$RICH_TEXT_EDITOR--LABEL--FONT--COLOUR: lighten($EDIT_ENGINE--BASE--COLOUR, 75%);

// PATH
$RICH_TEXT_EDITOR--PATH--BG--COLOUR: lighten($EDIT_ENGINE--BASE--COLOUR, 75%);
$RICH_TEXT_EDITOR--PATH--FONT--COLOUR: darken($EDIT_ENGINE--BASE--COLOUR, 50%);

// DIALOGUE
$RICH_TEXT_EDITOR--DIALOGUE--TITLE--FONT--COLOUR: _color("primary");
$RICH_TEXT_EDITOR--DIALOGUE--BG--COLOUR: _color("secondary");
$RICH_TEXT_EDITOR--DIALOGUE--PREVIEW--BG--COLOUR: _color("secondary");
$RICH_TEXT_EDITOR--DIALOGUE--BUTTON_ICON--BG--COLOUR: _color("secondary", d);
$RICH_TEXT_EDITOR--DIALOGUE--PREVIEW_CHARACTERS--FONT--COLOUR: _color("primary", g);
$RICH_TEXT_EDITOR--DIALOGUE--PARAGRAPH--FONT--COLOUR: _color("primary");
$RICH_TEXT_EDITOR--DIALOGUE--LINK--FONT--COLOUR: _color("quaternary");

$RICH_TEXT_EDITOR--DIALOGUE--TAB--FONT--COLOUR: _color("primary", b);
$RICH_TEXT_EDITOR--DIALOGUE--TAB--FONT--COLOUR---SELECTED: _color("quinary");
$RICH_TEXT_EDITOR--DIALOGUE--TAB--UNDERLINE--COLOUR---SELECTED: _color("quaternary");
$RICH_TEXT_EDITOR--DIALOGUE--TAB--UNDERLINE--COLOUR---HOVER: _color("primary", c);
$RICH_TEXT_EDITOR--DIALOGUE--LIST--BG--COLOUR: rgba(_color("secondary"), .9);

$RICH_TEXT_EDITOR--DIALOGUE--LIST--BG--COLOUR---SELECTED: _color("secondary");
$RICH_TEXT_EDITOR--DIALOGUE--LIST--ICON--BG--COLOUR---SELECTED: _color("quaternary");
$RICH_TEXT_EDITOR--DIALOGUE--LIST--ICON---SELECTED: _icon("navNext", "white");
